<template>
  <div class="login">
   <div class="out">
     <div class="logo">
       <img src="@/assets/imgs/logo1.jpg" alt="">
     </div>
     <div class="inner">
       <el-form ref="loginForm" label-width="100px" :model="loginForm" :rules="loginRoles" status-icon>
          <el-form-item label="用户名：" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">确认登录</el-button>
            <el-button  @click="resetForm()">重置</el-button>
          </el-form-item>
       </el-form>
     </div>
   </div>
  </div>
</template>

<script>
import { loginRequest } from "../../network/api/api"

export default {
  name:"Login",
  data() {
    return {
      loginForm:{
        username:"",
        password:""
      },
      loginRoles:{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        password:[
           { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    resetForm() {
      this.$refs['loginForm'].resetFields();
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if(!valid){
            this.$message.error("您填写的用户名或密码格式不正确")
          }else{
            loginRequest(this.loginForm).then(res => {
              if(res.data.code == 401){
                this.$message.error("用户名或密码不正确")
              }else if(res.data.code == 200){
                console.log(res)
                this.$store.dispatch("set_tonken",res.data.token)
                this.$message("登录成功")
                this.$router.push("/home")
              }
            })
          }
        });
    },
  },
  mounted() {
    window.onkeyup = (e) => {
      if(e.keyCode == 13){
        this.submitForm("loginForm")
      }
    }
  },
}
</script>

<style scoped lang="less">
 .login{
   width: 100%;
   height: 100%;
   background: #0D3F67;
   position: relative;
   .out{
     width: 460px;
     height: 340px;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     background: #fff;
     border-radius: 8px;
     box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
     .logo{
       width: 120px;
       height: 120px;
       border-radius: 50%;
       position: absolute;
       overflow: hidden;
       top: -60px;
       left: calc(50% - 60px);
       box-shadow: 0 0 20px rgba(0,0,0,0.2);
       img{
         width: 100%;
         height: 100%;
       }
     }
     .inner{
       padding-top: 100px;
       min-height: 200px;
       padding-right: 50px;
     }
   }
 }
</style>